import echarts from 'echarts'

export var data0 = {
  // backgroundColor: '#011c3a',
  title: [
    {
      show: true,
      text: '工程与取证可售资源',
      top: '15',
      textStyle: {
        color: '#C3E0FF',
        fontSize: 14,
        fontWeight: 'normal'
      }
    },
    {
      show: true,
      text: '中国金茂：20亿',
      top: '15',
      right: '0',
      textStyle: {
        color: '#87D2FF',
        fontSize: 16,
        fontWeight: 'normal'
      }
    },
    {
      show: true,
      text: '数据更新于2018年8月31日',
      bottom: '0',
      right: '0',
      padding: 0,
      textStyle: {
        color: '#B9CADB',
        fontSize: 12,
        fontWeight: 'normal'
      }
    }
  ],
  legend: {
    data: ['工程可售面积', '取证可售面积'],
    align: 'left',
    bottom: '6%',
    textStyle: {
      color: '#C3E0FF',
      fontSize: 12
    },
    icon: 'rect ',
    itemWidth: 12,
    itemHeight: 12,
    padding: 0,
    itemGap: 35
  },
  xAxis: {
    data: ['北京', '上海', '广州', '南京', '长沙', '重庆'],
    axisLine: {
      lineStyle: {
        color: '#C3E0FF;'
      }
    },
    axisLabel: {
      color: '#C3E0FF',
      fontSize: 12
    }
  },
  yAxis: {
    nameTextStyle: {
      color: '#fff',
      fontSize: 12
    },
    axisLine: {
      lineStyle: {
        color: '#0177d4'
      }
    },
    axisLabel: {
      color: '#6C86AD',
      fontSize: 12
    },
    splitLine: {
      // show: false,
      lineStyle: {
        color: '#2f4164',
        type: 'dashed'
      }
    }
  },
  series: [
    {
      name: '工程可售面积',
      type: 'bar',
      barWidth: 16, // 柱子宽度
      barGap: 0, // 柱子之间间距

      label: {
        normal: {
          show: true,
          textStyle: {
            color: '#82CEFF'
          },
          position: 'top'
        }
      },
      itemStyle: {
        normal: {
          color: new echarts.graphic.LinearGradient(
            0,
            0,
            0,
            1,
            [
              {
                offset: 0,
                color: '#87D1FF'
              },
              {
                offset: 1,
                color: '#4FA5FF'
              }
            ],
            false
          )
        }
      },
      data: [75, 49, 83, 110, 126, 63]
    },
    {
      name: '取证可售面积',
      type: 'bar',
      barWidth: 16,
      label: {
        normal: {
          show: true,
          textStyle: {
            color: '#FFD8A8'
            // fontSize: 8
          },
          position: 'top'
        }
      },
      itemStyle: {
        normal: {
          color: new echarts.graphic.LinearGradient(
            0,
            0,
            0,
            1,
            [
              {
                offset: 0,
                color: '#FFE08E'
              },
              {
                offset: 1,
                color: '#FFB558'
              }
            ],
            false
          )
        }
      },
      data: [50, 10, 63, 98, 116, 21]
    }
  ]
}

function data1fun () {
  var data = [
    {
      name: '北京',
      value: 120
    },
    {
      name: '上海',
      value: 61
    },
    {
      name: '广州',
      value: 59
    },
    {
      name: '南京',
      value: 41
    },
    {
      name: '长沙',
      value: 30
    },
    {
      name: '重庆',
      value: 14
    }
  ]

  var startColor = [
    '#89D8FF',
    '#EBC6FF',
    '#78EFFF',
    '#FFDC8D',
    '#FFBA93',
    '#E0F093'
  ]
  var endColor = [
    '#51B0FF',
    '#D394FF',
    '#43DBFF',
    '#FFB654',
    '#FF845A',
    '#BDDD5A'
  ]
  var RealData = []
  data.map((item, index) => {
    RealData.push(Object.assign({}, item))
  })
  RealData.map((item, index) => {
    item.itemStyle = {
      normal: {
        color: {
          type: 'linear',
          x: 0,
          y: 0,
          x2: 0,
          y2: 1,
          colorStops: [
            {
              offset: 0,
              color: startColor[index] // 0% 处的颜色
            },
            {
              offset: 1,
              color: endColor[index] // 100% 处的颜色
            }
          ],
          globalCoord: false // 缺省为 false
        }
      }
    }
  })
  return {
    // backgroundColor: '#152d5b',
    title: [
      {
        text: '已获取未售资源',
        top: '15',
        textStyle: {
          color: '#C3E0FF',
          fontSize: 14,
          fontWeight: 'normal'
        },
        left: 'left'
      },
      {
        text: '中国金茂：100亿',
        top: '15',
        textStyle: {
          color: '#87D2FF',
          fontSize: 16,
          fontWeight: 'normal'
        },
        right: 'right'
      },
      {
        text: '数据更新于2018年8月31日',
        textStyle: {
          color: '#C3E0FF',
          fontSize: 12,
          fontWeight: 'normal'
        },
        right: '0',
        bottom: '0',
        padding: 0
      }
    ],
    legend: {
      bottom: '4%',
      // left: 10,
      textStyle: {
        color: '#f2f2f2',
        fontSize: 12
      },
      icon: 'rect',
      itemWidth: 12,
      itemHeight: 12,
      itemGap: 10,
      padding: 12,
      data: data
    },
    grid: {
      // left: '3%', // 图表距离左右上下之间的距离
      // right: '4%',
      // top: '15%',
      // bottom: '40%',
      // containLabel: true
    },
    series: [
      // 主要展示层的
      {
        type: 'pie',
        radius: ['0', '60%'],
        label: {
          normal: {
            position: 'inner',
            formatter: '{c}',
            textStyle: {
              color: '#fff',
              fontSize: 12
            }
          }
        },
        labelLine: {
          normal: {
            show: false
          },
          emphasis: {
            show: false
          }
        },
        data: RealData,

        itemStyle: {
          normal: {
            borderColor: '#152d5b',
            borderWidth: 3
          }
        }
      }
    ]
  }
}
export var data1 = data1fun()
export var data3 = {
  title: [
    {
      show: true,
      text: '月度签约',
      top: '15',
      textStyle: {
        color: '#C3E0FF',
        fontSize: 14,
        fontWeight: 'normal'
      }
    },
    {
      show: true,
      text: '中国金茂：100亿',
      right: '0',
      top: '15',
      textStyle: {
        color: '#87D1FF',
        fontSize: 16,
        fontWeight: 'normal'
      }
    },
    {
      show: true,
      text: '数据更新于2018年8月31日',
      right: '0',
      bottom: '0',
      textStyle: {
        color: '#B9CADB',
        fontSize: 12,
        fontWeight: 'normal'
      }
    }
  ],
  // backgroundColor: '#011c3a',
  xAxis: {
    type: 'category',
    data: ['北京', '上海', '广州', '南京', '长沙', '重庆'],
    axisLine: {
      lineStyle: {
        color: '#C3E0FF'
      }
    },
    axisLabel: {
      color: '#C3E0FF',
      fontSize: 12
    }
  },
  yAxis: {
    nameTextStyle: {
      color: '#6C86AD',
      fontSize: 14
    },
    axisLine: {
      lineStyle: {
        color: '#0177d4'
      }
    },
    axisLabel: {
      color: '#6C86AD',
      fontSize: 12
    },
    splitLine: {
      // show: false,
      lineStyle: {
        color: '#2f4164',
        type: 'dashed'
      }
    }
    // interval: 500
    // max: 5000
  },
  series: [
    {
      type: 'bar',
      barWidth: 24,
      label: {
        normal: {
          show: true,
          textStyle: {
            color: '#FFD8A8'
          },
          position: 'top'
        }
      },
      itemStyle: {
        normal: {
          color: new echarts.graphic.LinearGradient(
            0,
            0,
            0,
            1,
            [
              {
                offset: 0,
                color: '#FFE08E'
              },
              {
                offset: 1,
                color: '#FFB558'
              }
            ],
            false
          )
        }
      },
      data: [75, 49, 83, 110, 126, 63]
    }
  ]
}
export var data4 = {
  title: [
    {
      show: true,
      text: '年度回款',
      top: '15',
      textStyle: {
        color: '#C3E0FF',
        fontSize: 14,
        fontWeight: 'normal'
      }
    },
    {
      show: true,
      text: '中国金茂：100亿',
      right: '0',
      top: '15',
      textStyle: {
        color: '#87D1FF',
        fontSize: 16,
        fontWeight: 'normal'
      }
    },
    {
      show: true,
      text: '数据更新于2018年8月31日',
      right: '0',
      bottom: '0',
      textStyle: {
        color: '#B9CADB',
        fontSize: 12,
        fontWeight: 'normal'
      }
    }
  ],
  // backgroundColor: '#011c3a',
  xAxis: {
    type: 'category',
    data: ['北京', '上海', '广州', '南京', '长沙', '重庆'],
    axisLine: {
      lineStyle: {
        color: '#C3E0FF'
      }
    },
    axisLabel: {
      color: '#C3E0FF',
      fontSize: 12
    }
  },
  yAxis: {
    nameTextStyle: {
      color: '#6C86AD',
      fontSize: 14
    },
    axisLine: {
      lineStyle: {
        color: '#0177d4'
      }
    },
    axisLabel: {
      color: '#6C86AD',
      fontSize: 12
    },
    splitLine: {
      // show: false,
      lineStyle: {
        color: '#2f4164',
        type: 'dashed'
      }
    }
    // interval: 500
    // max: 5000
  },
  series: [
    {
      type: 'bar',
      barWidth: 24,
      label: {
        normal: {
          show: true,
          textStyle: {
            color: '#82CEFF'
          },
          position: 'top'
        }
      },
      itemStyle: {
        normal: {
          color: new echarts.graphic.LinearGradient(
            0,
            0,
            0,
            1,
            [
              {
                offset: 0,
                color: '#87D1FF'
              },
              {
                offset: 1,
                color: '#4FA5FF'
              }
            ],
            false
          )
        }
      },
      data: [75, 49, 83, 110, 126, 63]
    }
  ]
}
export var data5 = {
  title: [
    {
      show: true,
      text: '月度回款',
      top: '15',
      textStyle: {
        color: '#C3E0FF',
        fontSize: 14,
        fontWeight: 'normal'
      }
    },
    {
      show: true,
      text: '中国金茂：100亿',
      right: '0',
      top: '15',
      textStyle: {
        color: '#87D1FF',
        fontSize: 16,
        fontWeight: 'normal'
      }
    },
    {
      show: true,
      text: '数据更新于2018年8月31日',
      right: '0',
      bottom: '0',
      textStyle: {
        color: '#B9CADB',
        fontSize: 12,
        fontWeight: 'normal'
      }
    }
  ],
  // backgroundColor: '#011c3a',
  xAxis: {
    type: 'category',
    data: ['北京', '上海', '广州', '南京', '长沙', '重庆'],
    axisLine: {
      lineStyle: {
        color: '#C3E0FF'
      }
    },
    axisLabel: {
      color: '#C3E0FF',
      fontSize: 12
    }
  },
  yAxis: {
    nameTextStyle: {
      color: '#6C86AD',
      fontSize: 14
    },
    axisLine: {
      lineStyle: {
        color: '#0177d4'
      }
    },
    axisLabel: {
      color: '#6C86AD',
      fontSize: 12
    },
    splitLine: {
      // show: false,
      lineStyle: {
        color: '#2f4164',
        type: 'dashed'
      }
    }
    // interval: 500
    // max: 5000
  },
  series: [
    {
      type: 'bar',
      barWidth: 24,
      label: {
        normal: {
          show: true,
          textStyle: {
            color: '#FFD8A8'
          },
          position: 'top'
        }
      },
      itemStyle: {
        normal: {
          color: new echarts.graphic.LinearGradient(
            0,
            0,
            0,
            1,
            [
              {
                offset: 0,
                color: '#FFE08E'
              },
              {
                offset: 1,
                color: '#FFB558'
              }
            ],
            false
          )
        }
      },
      data: [75, 49, 83, 110, 126, 63]
    }
  ]
}
export function addWaterMarker (id, str) {
  var can = document.createElement('canvas')
  var body = document.getElementById(id)

  body.appendChild(can)
  can.width = window.$(window).width()
  can.height = 200
  can.style.display = 'none'

  var cans = can.getContext('2d')
  cans.rotate((30 * Math.PI) / 180)
  cans.font = '16px Microsoft JhengHei'
  cans.fillStyle = '#8293BB'
  cans.textAlign = 'center'
  cans.textBaseline = 'Middle'
  cans.fillText(str, can.width / 2, 0)

  body.style.backgroundImage = 'url(' + can.toDataURL('image/png') + ')'
}
